<!-- pages/partner/checkIn-success.vue -->
<template>
  <view class="container">
    <!-- 顶部成功提示 -->
    <view class="success-section">
      <view class="success-animation">
        <image class="success-icon" src="/static/images/success.png"></image>
        <view class="confetti-effect">🎉</view>
      </view>
      <text class="success-text">打卡成功 ✨</text>
      <text class="success-date">{{currentDate}} 📅</text>
      <text class="success-streak">{{continuousDays}}天打卡 🔥</text>
    </view>
    
    <!-- 打卡统计 -->
    <view class="stats-section">
      <view class="stats-item">
        <view class="stats-icon">📍</view>
        <text class="stats-num">{{continuousDays}}</text>
        <text class="stats-label">连续打卡（天）</text>
        <text class="stats-trend" v-if="continuousTrend > 0">↗️ 超越{{continuousTrend}}%的同学</text>
      </view>
      <view class="stats-item">
        <view class="stats-icon">🎯</view>
        <text class="stats-num">{{totalDays}}</text>
        <text class="stats-label">累计打卡（天）</text>
        <text class="milestone" v-if="nextMilestone">距离{{nextMilestone}}天里程碑还差{{remainingDays}}天</text>
      </view>
      <view class="stats-item">
        <view class="stats-icon">⏱️</view>
        <text class="stats-num">{{studyHours}}</text>
        <text class="stats-label">今日学习（小时）</text>
        <text class="stats-achievement" v-if="studyHours >= targetHours">🌟 达成目标</text>
      </view>
    </view>
    
    <!-- 学习记录 -->
    <view class="study-record">
      <view class="record-header">
        <text class="record-title">📚 今日学习记录</text>
        <text class="total-time">共{{totalStudyTime}}小时</text>
      </view>
      <view class="record-content">
        <view class="record-item" v-for="(item, index) in studyRecords" :key="index">
          <view class="record-left">
            <text class="record-emoji">{{item.emoji}}</text>
            <text class="record-subject">{{item.subject}}</text>
          </view>
          <view class="record-right">
            <text class="record-time">{{item.time}}小时</text>
            <text class="record-progress">{{item.progress}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 今日成就 -->
    <view class="achievements">
      <text class="section-title">🏆 今日成就</text>
      <view class="achievement-list">
        <view class="achievement-item" v-for="(item, index) in achievements" :key="index">
          <text class="achievement-icon">{{item.icon}}</text>
          <text class="achievement-name">{{item.name}}</text>
        </view>
      </view>
    </view>
    
    <!-- 激励语 -->
    <view class="motivation">
      <text class="motivation-icon">💫</text>
      <text class="motivation-text">{{motivationText}}</text>
      <text class="sub-motivation">{{tomorrowGoal}}</text>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="share-btn" @tap="handleShare">
        <text class="btn-icon">🔗</text>
        <text>分享战绩</text>
      </button>
      <button class="return-btn" @tap="handleReturn">
        <text class="btn-icon">🏠</text>
        <text>返回首页</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CheckInSuccess',
  data() {
    return {
      currentDate: '',
      continuousDays: 7,
      totalDays: 30,
      studyHours: 8,
      targetHours: 8,
      continuousTrend: 85,
      nextMilestone: 50,
      remainingDays: 20,
      totalStudyTime: 8,
      studyRecords: [
        { subject: '高等数学', time: 3, emoji: '📐', progress: '完成进度 75%' },
        { subject: '英语', time: 2, emoji: '🌍', progress: '完成进度 60%' },
        { subject: '政治', time: 2, emoji: '📚', progress: '完成进度 40%' },
        { subject: '专业课', time: 1, emoji: '💻', progress: '完成进度 30%' }
      ],
      achievements: [
        { name: '早起学习者', icon: '🌅' },
        { name: '专注达人', icon: '🎯' },
        { name: '完成每日目标', icon: '✨' }
      ],
      motivationText: '今天的努力是明天的基础，继续保持！',
      tomorrowGoal: '明天目标：突破自我，再创佳绩 💪'
    }
  },
  onLoad() {
    this.setCurrentDate()
  },
  methods: {
    setCurrentDate() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      this.currentDate = `${year}年${month}月${day}日`
    },
    handleShare() {
      uni.showToast({
        title: '分享成功 🎉',
        icon: 'success'
      })
    },
    handleReturn() {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 30rpx;
}

.success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  position: relative;
}

.success-animation {
  position: relative;
  margin-bottom: 20rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  animation: pulse 1.5s infinite;
}

.confetti-effect {
  position: absolute;
  font-size: 40rpx;
  animation: confetti 1s ease-out;
}

.success-text {
  font-size: 36rpx;
  color: #A8BF8F;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.success-date {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.success-streak {
  font-size: 26rpx;
  color: #ff9800;
  font-weight: bold;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.stats-icon {
  font-size: 36rpx;
  margin-bottom: 10rpx;
}

.stats-num {
  font-size: 40rpx;
  color: #A8BF8F;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.stats-trend, .milestone, .stats-achievement {
  font-size: 22rpx;
  color: #ff9800;
  margin-top: 6rpx;
}

.study-record {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.total-time {
  font-size: 26rpx;
  color: #A8BF8F;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.record-left {
  display: flex;
  align-items: center;
}

.record-emoji {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.record-subject {
  font-size: 28rpx;
  color: #333;
}

.record-right {
  text-align: right;
}

.record-time {
  font-size: 28rpx;
  color: #A8BF8F;
  margin-bottom: 4rpx;
  display: block;
}

.record-progress {
  font-size: 22rpx;
  color: #999;
}

.achievements {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.achievement-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.achievement-item {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  padding: 12rpx 24rpx;
  border-radius: 100rpx;
}

.achievement-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.achievement-name {
  font-size: 26rpx;
  color: #666;
}

.motivation {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.motivation-icon {
  font-size: 40rpx;
  margin-bottom: 16rpx;
  display: block;
}

.motivation-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12rpx;
  display: block;
}

.sub-motivation {
  font-size: 26rpx;
  color: #A8BF8F;
  display: block;
}

.bottom-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.share-btn, .return-btn {
  width: 45%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 44rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.share-btn {
  background-color: #A8BF8F;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(168, 191, 143, 0.3);
}

.return-btn {
  background-color: #fff;
  color: #A8BF8F;
  border: 2rpx solid #A8BF8F;
}

.btn-icon {
  margin-right: 8rpx;
  font-size: 32rpx;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes confetti {
  0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -150%) rotate(360deg); opacity: 0; }
}

/* 按钮点击效果 */
.share-btn:active, .return-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}
</style>